<template>
  <div class="page">
    <div class="page-container">
			<Header activeId="7" />
			<div class="content">
        <Bread :data="[{text: '首页', href: '/'}, {text: '在线服务'}]" />
        <a href="/service/mine" class="btn btn-link btn-link-mine">我的预约<i class="bi bi-chevron-right"></i></a>
        <b-row v-if="list.length" class="justify-content-md-start">
          <b-col v-for="(item, i) in list" :key="i" xs="12" sm="6" lg="4">
            <b-card
              title="5月免费参观活动"
              tag="article"
              style="width:100%"
              class="mb-4"
            >
              <div class="card-text">
                <div>活动时间：2024-05-01——2024-05-03</div>
                <div>每个预约人数限制为3人</div>
                <div>预约只能使用一次，超过时间作废</div>
                <div>预约时需指定来访时间</div>
              </div>
              <div class="text-right">
                <b-button href="/service/form" variant="outline-primary">在线预约</b-button>
              </div>
            </b-card>
          </b-col>
        </b-row>
        <Empty v-else />
			</div>
      <Footer />
		</div>
	</div>
</template>

<script>
import Header from '@/components/header.vue'
import Footer from '@/components/footer.vue'
import Bread from '@/components/bread.vue'
import Empty from '@/components/empty.vue'

export default {
	components: {
    Header,
    Footer,
    Bread,
    Empty
	},

  data () {
    return {
      form: {},
      list: []
    }
  },

  async asyncData({ $service, $axios }) {
    // 系统配置
    let res = await $service.service.queryListAll({}, {
      $http: $axios
    })
    let data = res?.data?.data || []
    return {
      list: data
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  position: relative;
  .btn-link-mine {
    display: flex;
    align-items: center;
    position: absolute;
    top: 17px;
    right: 0;
    z-index: 3;
    font-size: 14px;
  }
}
.paner {
  margin-bottom: 8px;
  .paner-form {
    flex: 1;
  }
  .form-groups {
    display: flex;
    align-items: center;
    margin: 4px 0;
    .form-groups-label {
      margin-bottom: 0;
      width: 60px;
      text-align: right;
    }
    .form-groups-content {
      flex: 1;
    }
  }
}
.card-text {
  color: #666;
}
</style>
